<template>
  <div class="warning-info" v-if="isShowWarningInfoPop">
    <PanelWaringInfo
      title="预警信息"
      content="WARNING INFORMATION"
      @show="showWarnInfo"
      @closed="closedWarnInfoPop"
    ></PanelWaringInfo>
    <div class="list" v-if="isShowWarningInfo">
      <div class="item" v-for="item in warningInfoList">
        <div class="icon"></div>
        <span :style="{color:getColor(item.color)}"
          >{{ item.area }}{{ item.pos }}&nbsp;{{ item.announcedtime }}&nbsp;{{
            item.type
          }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { color } from "echarts";
import PanelWaringInfo from "./panelWaringInfo.vue";
import { getWarnSignalInfo } from "@/api/zhjcright";
export default {
  name: "WarningInfo",
  components: {
    PanelWaringInfo,
  },
  data() {
    return {
      isShowWarningInfo: false,
      isShowWarningInfoPop: true,
      warningInfoList: [],
      colorArray: [
        { key: "红色", value: "#FF0000" },
        { key: "橙色", value: "#FFA500" },
        { key: "黄色", value: "yellow" },
      ],
    };
  },
  mounted() {
    getWarnSignalInfo({})
      .then((res) => {
        this.warningInfoList = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    showWarnInfo() {
      this.isShowWarningInfo = !this.isShowWarningInfo;
    },
    closedWarnInfoPop() {
      this.isShowWarningInfoPop = false;
    },
    getColor(key) {
      return this.colorArray.find((item) => item.key == key).value;
    },
  },
};
</script>

<style scoped lang="scss">
.warning-info {
  position: fixed;
  top: 6rem;
  left: 50%;
  width: 30rem;
  transform: translate(-90%, 0);
  z-index: 10;
  .list {
    position: absolute;
    width: 93.4%;
    top: 2rem;
    padding: 1rem;
    background-color: rgb(37, 55, 75, 0.9);
    .item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: white;
      margin-top: 1rem;
      padding: 0 0.5rem;
      background-color: rgba(60, 100, 133, 0.4);
      border: 1px solid #4c769a;
      .icon {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: red;
        z-index: 10;
      }
    }
    .item:first-child {
      margin-top: 0;
    }
  }
}
</style>
